@import "../common/index";

.commonConsult {
  position: fixed;
  top: 240px;
  right: 36px;
  z-index: 999;
  .consultBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px 5px 16px;
    border-radius: 24px;
    background: linear-gradient(0deg, #4086F8 0%, #64A0EA 100%);

    img {
      width: 38px;
      height: 38px;
    }

    span {
      writing-mode: vertical-rl;
      margin-top: 12px;
      color: #fff;
    }
  }
  .qrCode{
    display: none;
    position: absolute;
    right: 60px;
    top: calc(-50% + 12px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    filter: drop-shadow(2px 1px 4px rgba(0, 0, 0, .5));
    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: -15px;
      width: 0;
      height: 0;
      margin: auto;
      border-left: 8px solid #fff;
      border-right: 8px solid transparent;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }
    img{
      width: 200px;
      height: 200px;
      margin-bottom: .5rem;
    }
    span{
      font-size: 14px;
      color: #666;
    }
  }
  &:hover{
    .qrCode{
      display: flex;
    }
  }
}
